<!DOCTYPE html>
<html>
<head>
    <title>Parallel Conducting Plates</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ddd;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Drawing parameters
        const plateWidth = 10;
        const plateHeight = 250;
        const startX = 80;
        const plateY = (canvas.height - plateHeight) / 2;
        const spacing = 85;

        // Plate x-coordinates
        const x_coords = [
            startX,
            startX + spacing,
            startX + 2 * spacing,
            startX + 4 * spacing, // Gap for ellipsis
            startX + 5 * spacing
        ];
        
        // Labels
        const q_labels = ['1', '2', '3', 'N-1', 'N'];
        const num_labels = ['1', '2', '3', 'N-1', 'N'];

        // Common text properties
        const textAboveY = plateY - 25;
        const textBelowY = plateY + plateHeight + 30;

        // --- Drawing Functions ---

        /**
         * Draws a single conducting plate.
         * @param {number} x - The x-coordinate of the plate's top-left corner.
         */
        function drawPlate(x) {
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;
            ctx.strokeRect(x, plateY, plateWidth, plateHeight);
        }

        /**
         * Draws the label 'Q' with a subscript.
         * The function centers the entire 'Q_subscript' label at the given x_center.
         * @param {string} subscript - The text for the subscript.
         * @param {number} x_center - The horizontal center for the entire label.
         * @param {number} y_base - The vertical baseline for the 'Q'.
         */
        function drawQLabel(subscript, x_center, y_base) {
            const q_font = 'italic 24px Times New Roman';
            const sub_font = 'italic 16px Times New Roman';
            const gap = 2;

            ctx.font = q_font;
            const q_width = ctx.measureText('Q').width;
            ctx.font = sub_font;
            const sub_width = ctx.measureText(subscript).width;

            // Calculate positions to center the composite label
            const q_x_pos = x_center - (sub_width + gap) / 2;
            const sub_x_pos = x_center + (q_width + gap) / 2;

            // Draw 'Q'
            ctx.font = q_font;
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText('Q', q_x_pos, y_base);
            
            // Draw subscript
            ctx.font = sub_font;
            ctx.fillText(subscript, sub_x_pos, y_base + 5);
        }

        /**
         * Draws a numerical label below a plate.
         * @param {string} label - The text of the label.
         * @param {number} x_center - The horizontal center for the label.
         * @param {number} y_pos - The vertical position for the label.
         */
        function drawNumLabel(label, x_center, y_pos) {
            ctx.font = '20px Times New Roman';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText(label, x_center, y_pos);
        }

        // --- Main Drawing Logic ---

        // Draw plates and their labels
        for (let i = 0; i < x_coords.length; i++) {
            const x = x_coords[i];
            const plateCenterX = x + plateWidth / 2;
            
            drawPlate(x);
            drawQLabel(q_labels[i], plateCenterX, textAboveY);
            drawNumLabel(num_labels[i], plateCenterX, textBelowY);
        }

        // Draw the ellipsis (...)
        const ellipsisX = x_coords[2] + spacing + plateWidth / 2;
        const ellipsisY = plateY + plateHeight / 2;
        ctx.font = 'bold 36px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText('...', ellipsisX, ellipsisY);

    </script>
</body>
</html>